<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>InfArena 2.0 Statistics</title>
        <link href="styles/style1.css" rel="stylesheet"/>
        <script type="text/javascript" src="scripts/chart_extender.js" />
    </h:head>
    <h:body>
        <h:form>
            <p:ajaxStatus styleClass="ajax-status">
                <f:facet name="start">
                    <p:graphicImage value="images/ajaxloading.gif" />
                </f:facet>
                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>

            <div class="stat sidebar">
                <h:link value="Inicio" outcome="index" />
                <p:separator/>
                <h:outputText value="Juegos:" />
                <p:selectOneMenu id="chosenGames" value="#{statistics.selectedGamePeriod}">
                    <f:selectItems value="#{statistics.gamePeriods}" var="n" itemLabel="#{n.label}" itemValue="#{n.value}" />
                    <p:ajax listener="#{statistics.changeGamePeriod}" update="statPanel,chartEffectiveness,chartDKRatio" />
                </p:selectOneMenu>
                <p:separator/>
                <h:outputText value="Jugadores:" />
                <p:selectManyCheckbox value="#{statistics.selectedPlayersIds}" layout="pageDirection">
                    <f:selectItems value="#{statistics.allPlayers}" var="n" itemLabel="#{n.name}" itemValue="#{n.id}" />
                    <p:ajax listener="#{statistics.changeSelectedPlayers}" update="statPanel,chartEffectiveness,chartDKRatio" />
                </p:selectManyCheckbox>
            </div>

            <div class="stat main">
                <p:panel id="statPanel">
                    <p:dataTable var="stats" value="#{statistics.generalStatistics}">
                        <p:column headerText="Jugador">
                            <ui:insert name="playerList" >
                                <ui:include src="player_image.xhtml" >
                                    <ui:param name="imageSize" value="50" />
                                    <ui:param name="playerId" value="#{stats.player.id}" />
                                </ui:include>
                            </ui:insert>
                        </p:column>
                        <p:column headerText="Partidos" sortBy="#{stats.matchesPlayed}" >
                            <h:outputText value="#{stats.matchesPlayed}" />
                        </p:column>
                        <p:column headerText="Partidos Ganados" sortBy="#{stats.matchesWon}" >
                            <h:outputText value="#{stats.matchesWon}" />
                        </p:column>
                        <p:column headerText="Efectividad" sortBy="#{stats.effectiveness}" >
                            <h:outputText value="#{stats.formattedEffectiveness}" />
                        </p:column>
                        <p:column headerText="Puntos por Minuto" sortBy="#{stats.pointsPerMinute}" >
                            <h:outputText value="#{stats.formattedPointsPerMinute}" />
                        </p:column>
                        <p:column headerText="Deaths/Kills Ratio" sortBy="#{stats.kdRatio}" >
                            <h:outputText value="#{stats.formattedKdRatio}" />
                        </p:column>
                        <p:column headerText="Veces MVP" sortBy="#{stats.timesMVP}" >
                            <h:outputText value="#{stats.timesMVP}" />
                        </p:column>
                        <p:column headerText="Veces MVP por partido" sortBy="#{stats.timesMVPPerMatch}" >
                            <h:outputText value="#{stats.formattedTimesMVPPerMatch}" />
                        </p:column>
                    </p:dataTable>
                    <br/>
                    <p:separator/>
                    <br/>
                    <p:lineChart id="chartEffectiveness" value="#{statistics.chartEffectiveness}"
                                 legendPosition="nw" title="Efectividad" minX="0" minY="0" maxY="100" style="height:500px" extender="jqplotChartExtender" />
                    <br/>
                    <p:separator/>
                    <br/>
                    <p:lineChart id="chartDKRatio" value="#{statistics.chartDKRatio}"
                                 legendPosition="nw" title="Death-Kill ratio" minX="0" minY="0" style="height:500px" extender="jqplotChartExtender" />
                </p:panel>
            </div>
        </h:form>
    </h:body>
</html>

